<template>
  <el-dialog
    v-model="dialogVisible"
    title="写评论"
    width="50%"
    :before-close="handleClose"
  >
    <div class="review-form">
      <!-- 商品信息 -->
      <div class="product-info">
        <el-image :src="product.image" class="product-image" />
        <div class="product-details">
          <h3>{{ product.name }}</h3>
          <p class="price">¥{{ Number(product.price).toFixed(2) }}</p>
        </div>
      </div>

      <!-- 评分 -->
      <div class="form-item">
        <div class="label">评分 <span class="required">*</span></div>
        <el-rate
          v-model="form.rating"
          :texts="['非常差', '差', '一般', '好', '非常好']"
          show-text
        />
      </div>

      <!-- 标题 -->
      <div class="form-item">
        <div class="label">标题 <span class="required">*</span></div>
        <el-input
          v-model="form.title"
          placeholder="请输入评论标题"
          maxlength="100"
          show-word-limit
        />
      </div>

      <!-- 评论内容 -->
      <div class="form-item">
        <div class="label">评论内容 <span class="required">*</span></div>
        <el-input
          v-model="form.content"
          type="textarea"
          :rows="4"
          placeholder="请分享您的使用体验"
          maxlength="500"
          show-word-limit
        />
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" :loading="submitting" @click="handleSubmit">
          发布评论
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const props = defineProps({
  visible: Boolean,
  product: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update:visible', 'submitted'])

const dialogVisible = ref(props.visible)
const submitting = ref(false)
const form = ref({
  rating: 5,
  title: '',
  content: ''
})

// 监听 visible 属性变化
watch(() => props.visible, (newVal) => {
  dialogVisible.value = newVal
})

// 监听对话框可见性变化
watch(dialogVisible, (newVal) => {
  emit('update:visible', newVal)
})

const handleClose = () => {
  dialogVisible.value = false
  form.value = {
    rating: 5,
    title: '',
    content: ''
  }
}

const validateForm = () => {
  if (!form.value.rating) {
    ElMessage.error('请选择评分')
    return false
  }
  if (!form.value.title.trim()) {
    ElMessage.error('请输入评论标题')
    return false
  }
  if (!form.value.content.trim()) {
    ElMessage.error('请输入评论内容')
    return false
  }
  return true
}

const handleSubmit = async () => {
  if (!validateForm()) return

  try {
    submitting.value = true
    await axios.post(`/api/products/${props.product.id}/reviews`, form.value)
    ElMessage.success('评论发布成功')
    emit('submitted')
    handleClose()
  } catch (error) {
    console.error('Error:', error)
    ElMessage.error('评论发布失败')
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped>
.review-form {
  padding: 20px 0;
}

.product-info {
  display: flex;
  gap: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 30px;
}

.product-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
}

.product-details {
  flex: 1;
}

.product-details h3 {
  margin: 0 0 10px;
  font-size: 16px;
  color: #333;
}

.price {
  color: #ff6b6b;
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.form-item {
  margin-bottom: 20px;
}

.label {
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}

.required {
  color: #ff4949;
  margin-left: 4px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

:deep(.el-rate__text) {
  font-size: 14px;
}
</style> 